/**
 * 系统管理 用户管理
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>科研项目</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="select" class="user-search">
      <el-form-item label="项目名称：">
        <el-input size="small" v-model="select.name" auto-complete="off" placeholder="请输入项目名称"></el-input>
      </el-form-item>
      <el-form-item label="项目状态：">
        <el-select size="small" v-model="select.status" placeholder="请选择" clearable="true">
            <el-option label="进行中" value="1"></el-option>
            <el-option label="已结束" value="2"></el-option>
            <el-option label="未开始" value="3"></el-option>
          </el-select>
      </el-form-item>
      <el-form-item label="项目级别">
        <el-select size="small" v-model="select.level" placeholder="请选择">
            <el-option label="高" value="1"></el-option>
            <el-option label="中" value="2"></el-option>
            <el-option label="低" value="3"></el-option>
          </el-select>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">查询</el-button>
        <el-button size="small" type="primary" @click="addproject()">新增</el-button>
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table size="small" @selection-change="selectChange" :data="dataList" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
      <el-table-column align="center" sortable prop="name" label="项目名称" width="200">
      </el-table-column>
      <el-table-column align="center" sortable prop="level" label="项目级别" width="200">
      </el-table-column>
      <el-table-column align="center" sortable prop="status" label="项目状态" width="200">
      </el-table-column>
      <el-table-column align="center" sortable prop="datail" label="项目详情" width="200">
      </el-table-column>
      <el-table-column align="center" sortable prop="createTime" label="创建时间" min-width="200">
      </el-table-column>
      <el-table-column label="操作" min-width="300">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="deleteProject(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
    <!-- 新增页面 -->
    <el-dialog title="新增科研项目" :visible.sync="addVisible" width="30%" @click='closeDialog("1")'>
      <el-form label-width="80px" ref="addVisible" :model="addForm">
        <el-form-item label="项目名称" prop="name">
          <el-input v-model="addForm.name" type="textarea" placeholder="请输入项目名称" />
        </el-form-item>
        <el-form-item label="项目级别" prop="name">
          <el-select size="small" v-model="addForm.level" placeholder="请选择">
            <el-option label="高" value="1"></el-option>
            <el-option label="中" value="2"></el-option>
            <el-option label="低" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目状态" prop="name">
            <el-select size="small" v-model="addForm.status" placeholder="请选择">
              <el-option label="进行中" value="1"></el-option>
              <el-option label="已结束" value="2"></el-option>
             <el-option label="未开始" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目详情" prop="name">
          <el-input v-model="addForm.datail" maxlength="1000" type="textarea" placeholder="请输入项目详情" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click='closeDialog("1")'>取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="addResearch(addForm)">保存</el-button>
      </div>
    </el-dialog>
    <!-- 修改页面 -->
    <el-dialog title="修改科研项目" :visible.sync="updateVisible" width="30%" @click='closeDialog("2")'>
      <el-form label-width="80px" :model="upadteForm">
        <el-form-item label="项目名称" prop="name">
          <el-input size="small" v-model="upadteForm.name" auto-complete="off" placeholder="请输入项目名称"></el-input>
        </el-form-item>
        <el-form-item label="项目级别" prop="name">
          <el-select size="small" v-model="upadteForm.level" placeholder="请选择">
            <el-option label="高" value="高"></el-option>
            <el-option label="中" value="中"></el-option>
            <el-option label="低" value="低"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目状态" prop="name">
          <el-input size="small" v-model="upadteForm.name" auto-complete="off" placeholder="请输入项目状态"></el-input>
        </el-form-item>
        <el-form-item label="项目详情" prop="name">
          <el-input v-model="upadteForm.datail" maxlength="1000" type="textarea" placeholder="请输入项目详情" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click='closeDialog("2")'>取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="addResearch(upadteForm)">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 导入请求方法
import {getList } from '../../api/sresearch'
import Pagination from '../../components/Pagination'
export default {



  data() {
    return {
      datalist:[
        {
          name:'',
          level:'',
          status:'',
          datail:'',
          createTime:''
        }
      ],
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10
      },
      addVisible: false,
      updateVisible: false,
      formInline:{},
      select:{},
      loading: false, //是显示加载
      addForm:{},
      upadteForm:{}
    }
  },
  // 注册组件
  components: {
    Pagination
  },

  /**
   * 数据发生改变
   */
  watch: {},

  /**
   * 创建完毕
   */
  created() {
    var l = 1;
    var z = 2;
    this.getData(this.formInline)
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    getData(){
        let _this = this;
        this.formInline.offset = this.pageparm.currentPage;
        this.formInline.pageSize = this.pageparm.pageSize;
        this.formInline.laboratoryId = sessionStorage.getItem("mainId");
        this.formInline.level = this.select.level;
        this.formInline.status = this.select.status;
        this.formInline.name = this.select.name;
        getList(this.formInline).then(res =>{
            if(res.status == 200){
                _this.dataList = res.data;
                _this.pageparm.total = res.total;
                console.log(_this.dataList);
                if(_this.dataList && _this.dataList.length > 0){
                    _this.dataList.forEach(ele => {
                        if(ele.imgList && ele.imgList.length > 0){
                            ele.url = getFileNameFromPath(ele.imgList[0].img);
                        }else {
                            ele.url = "";
                        }
                    })
                }
            }
        })
    },

    addResearch(data){
      return request({
        url: `/sresearch/insert`,
        method: 'post',
        params
      })
    },
    //修改时间
    handleEdit(data){
      this.updateVisible = true;
      this.upadteForm = data;
    },
    //关闭弹框
    closeDialog(type){
      if(type == '1'){
        this.addVisible = false;
      }
      if(type == '2'){
        this.updateVisible = false;
      }
    },
    addproject(){
      this.addVisible = true
    },
    search(){

    },
    selectChange(){

    },
    callFather(){

    }
  }
}
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
.limited-width-table {
  max-width: 150px; /* 你想要限制的宽度 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 显示省略号 */
  white-space: nowrap; /* 不换行 */
}
</style>

 